<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 伪元素</title>
    <style type="text/css">
        /*
            css 伪元素用于向某些选择器设置特殊效果
        */

        /* first-line 只能用于块级元素
            下面的属性可应用于 "first-line" 伪元素：

            font
            color
            background
            word-spacing
            letter-spacing
            text-decoration
            vertical-align
            text-transform
            line-height
            clear
         */
        /*伪元素可以和css样式结合使用*/
        p.firstLine:first-line{
            color: #8235bd;
            font-variant: small-caps; /* 这个小的small-caps*/
        }

        /* first-letter 也只能用于块级元素 */
        p.firstLetter:first-letter{
            color: #ff0000;
            font-size:xx-large;  /* 加大*/
        }

        /*
        多重伪元素
        段落的第一个字母将显示为红色，其字体大小为 xx-large。
        第一行中的其余文本将为蓝色，并以小型大写字母显示。
        段落中的其余文本将以默认字体大小和颜色来显示
        */
        p.mutiElement:first-letter{
            color:#0000ff;
            font-variant: small-caps; /* 这个小的small-caps*/
        }

        p.mutiElement:first-line{
            color: #7a991a;
            font-size: xx-large;
        }

        /*:before 伪元素
           伪元素可以在元素的内容前面插入新的内容
            相对应的还有after
         */
        h1:before{
            content: url("../images/eg_venus.gif");  /*在<h1>元素前面插入一副图片*/
        }

        h1:after{
            content: url("../images/eg_cute.gif");  /*元素的后面插入一副图片*/
        }
    </style>
</head>
<body>
    <p class="firstLine">
        You can use the :first-line pseudo-element
        to add a special effect to the first line of a text!
        <br/>看下这个第二行     <!--  确实只影响了第一行 没有影响第二行的元素 -->
    </p>
    <p class="firstLetter">
        You can use the :first-letter pseudo-element to add a special effect to the first letter of a text!
        <br/>second Line第二行的首字母没有改变
    </p>
    <p class="mutiElement">
        You can combine the :first-letter and :first-line pseudo-elements to add a special effect to the first letter and
        the first line of a text!
    </p>  <!--  注意和第一种的差别 这种会随着宽度的变化文字第一行的文字字数是有变化的 -->

    <!-- h1 元素 -->
    <h1>This is a heading</h1>
    <p>The :before pseudo-element inserts content before an element.</p>
    <h1>This is a heading</h1>
    <p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 content 属性。

</body>
</html>